<template>
  <div>
    <el-input-number
      v-model="hour"
      :size="size"
      controls-position="right"
      :disabled="disabled"
      @blur="handleChange(hour, 'hour')"
      :controls="false"
    ></el-input-number>
    <span>:</span>
    <el-input-number
      v-model="minute"
      :size="size"
      controls-position="right"
      :disabled="disabled"
      @blur="handleChange(minute, 'minute')"
      :controls="false"
    ></el-input-number>
  </div>
</template>

<script>
export default {
  name: 'TimeInput',
  props: {
    time: {
      type: Number,
      default: 0
    },
    size: {
      type: String,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      hour: Math.floor(this.time / 60),
      minute: this.time % 60
    };
  },
  watch: {
    time (newTime) {
      this.hour = Math.floor(newTime / 60);
      this.minute = newTime % 60;
    }
  },
  methods: {
    handleChange (value, type) {
      if (type === 'hour') {
        this.hour = value;
      } else if (type === 'minute') {
        this.minute = value;
      }
      const totalMinutes = this.hour * 60 + this.minute;
      this.$emit('change', totalMinutes);
    }
  }
};
</script>
